<template>
  <div class="manage-check">
    <div class="title">
      {{ [$t("shopWallet.refundCheck"), $t("shopWallet.incomeCheck")][ioType] }}{{ $t("shopWallet.riconciliazioneDetail")
      }}
    </div>

    <!-- 收入对账明细 -->
    <div
      v-if="ioType === 1"
      class="table-box"
    >
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('formData.serialNumber')"
          type="index"
          width="60"
        />
        <el-table-column
          v-if="!isPlatform"
          prop="shopName"
          :label="$t('coupon.shopName')"
        />
        <el-table-column
          width="150"
          prop="payTime"
          :label="$t('user.payTime')"
        />
        <el-table-column
          prop="orderNumber"
          :label="$t('distribIncome.orderNumber')"
        />
        <el-table-column
          width="160"
          prop="bizPayNo"
          :label="$t('shopWallet.bizPayNo')"
        />
        <el-table-column
          prop="payType"
          :label="$t('order.paymentMethod')"
        >
          <template #default="scope">
            <span>
              {{
                [
                  $t("order.pointsPayment"),
                  $t("order.wecProPay"),
                  $t("order.alipayPCPayment"),
                  $t("order.wechatScanCodePayment"),
                  $t("order.wechatH5Payment"),
                  $t("order.weclAccountPay"),
                  $t("order.alipayH5Payment"),
                  $t("order.alipayAPPPayment"),
                  $t("order.wechatAPPPayment"),
                  $t("order.balancePayment"),
                  $t("order.payPalPayment"),
                ][scope.row.payType]
              }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="payNo"
          :label="$t('shopWallet.payNumber')"
        >
          <template #default="scope">
            <span>{{ scope.row.payNo || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="alipayAmount"
          :label="$t('order.aliPay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.alipayAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatAmount"
          :label="$t('order.weixinPay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.wechatAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balanceAmount"
          :label="$t('publics.balancePay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.balanceAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="scoreCount"
          :label="$t('user.scorePay')"
        >
          <template #default="scope">
            <span>{{ scope.row.scoreCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="allinpayStore.paySettlementType !== 1"
          prop="paypalAmount"
          :label="$t('shopWallet.payPal')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.paypalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          :label="$t('shopWallet.totalNum')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 收入对账明细end -->

    <!-- 退款对账明细 -->
    <div
      v-else
      class="table-box"
    >
      <el-table
        :data="tableData1"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('formData.serialNumber')"
          type="index"
          width="60"
        />
        <el-table-column
          v-if="!isPlatform"
          prop="shopName"
          :label="$t('coupon.shopName')"
        />
        <el-table-column
          prop="payTime"
          :label="$t('user.payTime')"
        />
        <el-table-column
          prop="orderNumber"
          :label="$t('distribIncome.orderNumber')"
        />
        <el-table-column
          prop="bizPayNo"
          :label="$t('shopWallet.bizPayNo')"
        >
          <template #default="scope">
            <span>{{ scope.row.bizPayNo || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="payType"
          :label="$t('order.paymentMethod')"
        >
          <template #default="scope">
            <span>
              {{
                [
                  $t("order.pointsPayment"),
                  $t("order.wecProPay"),
                  $t("order.alipayPCPayment"),
                  $t("order.wechatScanCodePayment"),
                  $t("order.wechatH5Payment"),
                  $t("order.weclAccountPay"),
                  $t("order.alipayH5Payment"),
                  $t("order.alipayAPPPayment"),
                  $t("order.wechatAPPPayment"),
                  $t("order.balancePayment"),
                  $t("order.payPalPayment"),
                ][scope.row.payType]
              }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="payNo"
          :label="$t('shopWallet.payNumber')"
        />
        <el-table-column
          prop="alipayAmount"
          :label="$t('order.aliPay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.alipayAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatAmount"
          :label="$t('order.weixinPay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.wechatAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balanceAmount"
          :label="$t('publics.balancePay')"
        >
          <template #default="scope">
            <span>￥{{ scope.row.balanceAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="scoreCount"
          :label="$t('user.scorePay')"
        >
          <template #default="scope">
            <span>{{ scope.row.scoreCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="allinpayStore.paySettlementType !== 1"
          prop="paypalAmount"
          :label="$t('shopWallet.payPal')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.paypalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          :label="$t('shopWallet.totalNum')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 退款对账明细end -->
    <div class="back">
      <div
        class="default-btn primary-btn"
        @click="back"
      >
        {{ $t('shopFeature.edit.back') }}
      </div>
    </div>
    <!-- 分页条 -->
    <!-- <pagination style="text-align: right" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="pagination" /> -->
    <el-pagination
      v-if="total > 0"
      :current-page="params.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'

const Data = reactive({
  time: '',
  activeName: 'first',
  total: 0,
  ioType: '',
  params: {
    current: 1,
    size: 10,
    startTime: '',
    endTime: '',
    shopName: '',
    shopId: ''
  },
  payList: [
    {
      name: '银联',
      amount: 0.00,
      percent: 0.00
    },
    {
      name: '微信',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '支付宝',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '积分兑换',
      amount: 0.30,
      percent: 0.40
    },
    {
      name: '转账汇款',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '企业银联',
      amount: 0.10,
      percent: 0.10
    },
    {
      name: '余额',
      amount: 0.10,
      percent: 0.10
    }
  ],
  tableData: [],
  tableData1: [],
  fromData: '',
  isPlatform: false
})

const { total, ioType, params, tableData, tableData1, isPlatform } = toRefs(Data)

const allinpayStore = useAllinpayStore()
const route = useRoute()
onMounted(() => {
  Data.ioType = Number(route.query.type)
  Data.params.startTime = route.query.startTime
  Data.params.endTime = route.query.endTime
  Data.params.shopId = route.query.shopId
  getData()
})

const getData = () => {
  if (Data.ioType) {
    http({
      url: http.adornUrl('/platform/accountDetail/pageShopIncomeAccountDetail'),
      method: 'get',
      params: Data.params
    }).then(({ data }) => {
      Data.tableData = data.records
      Data.total = data.total
    })
  } else {
    http({
      url: http.adornUrl('/platform/accountDetail/pageShopRefundAccountDetail'),
      method: 'get',
      params: Data.params
    }).then(({ data }) => {
      Data.tableData1 = data.records
      Data.total = data.total
    })
  }
  Data.isPlatform = Number(Data.params.shopId) === 0
}

const handleSizeChange = (val) => {
  Data.params.size = val
  getData()
}

const handleCurrentChange = (val) => {
  Data.params.current = val
  getData()
}

const router = useRouter()
const back = () => {
  router.back()
}

</script>

<style lang="scss" scoped>
.manage-check {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }

}
.back {
  margin-top: 20px;
}
</style>
